<template>
  <div class="bigDiv">
    <el-container class="home-container">
      <!--头部区域-->
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo h_menu" mode="horizontal" @select="handleSelect">
          <el-menu-item index="1"><span style="color: #606266; font-size: 40px;">{{ $store.state.VueName }}</span>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/survey/person">
              <el-button type="text">个人问卷</el-button>
            </router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/survey/question">
              <el-button type="text">调查咨询</el-button>
            </router-link>
          </el-menu-item>
          <el-submenu index="4">
            <template slot="title">
              <el-button type="text">帮助与支持</el-button>
            </template>
            <el-menu-item index="4-1">帮助中心</el-menu-item>
            <el-menu-item index="4-2">开发者中心</el-menu-item>
          </el-submenu>
        </el-menu>
        <el-dropdown @command="handleCommand" class="drop">
          <el-avatar id="el_avatar">{{ this.name() }}</el-avatar>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="b">
              <el-link href="/survey/personData" :underline="false">
                <i class="el-icon-user-solid"></i>
                <span>{{ this.$store.state.name }}</span>
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item command="c">
              <el-link href="/survey/personReply" :underline="false">
                <i class="el-icon-view"></i>
                <span>回答过的问卷</span>
              </el-link>
            </el-dropdown-item>
            <el-dropdown-item command="a">
              <i class="el-icon-error"><b v-if="this.$store.state.userId==''||this.$store.state.userId==null">登录</b><b
                  v-else> 退出登录</b></i>
            </el-dropdown-item>

          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 页面主体区域-->
      <el-container class="main_con">
        <router-view></router-view>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: '1',
    };
  },
  methods: {
    name() {
      if (this.$store.state.name != null)
        return this.$store.state.name.charAt(0)
    },
    //下拉菜单处理方法
    handleCommand(command) {
      if (command == 'a') {
        window.sessionStorage.clear();
        this.$router.push("/login");
      }
    },
    //导航条点击方法
    handleSelect(key, keyPath) {
      console.log("key:" + key);
      console.log(key, keyPath);
      /*根据点击的key选择页面*/
      if (key == 1) {
        this.$router.push("/survey/leader");
      } else if (key == 2) {
        this.$router.push("/survey/person");
      } else if (key == 3) {
        this.$router.push("/survey/question");
      }
    }
  }, created() {
    this.$store.commit('insertUserId', window.sessionStorage.getItem('userId'));
    this.$store.commit('updateName', window.sessionStorage.getItem('name'));
  }
}
</script>

<style lang="less" scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  width: 100px;
  border: 1px solid red;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.bigDiv {
  height: 100%;

  .home-container {
    height: 100%;
  }
}
#el_avatar{
    cursor:pointer
}
.main_con {
  margin-top: 1px;
  height: 90%;
  width: 100%;
}

.h_item {
  margin-right: 0px;
}

.h_menu {
  min-width: 900px;
}

.drop {
  margin-top: 10px;
  margin-right: 10px;
}

.el-aside {
  background: snow;
}

.el-header {
  display: flex;
  width: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
}

.h_menu {
  width: 100%;
}

.el-main {
  background: whitesmoke;
}
</style>